<template>
  <div class="radio">
    <div :class="`radio-big-circle ${ result ? 'is_actived' : '' }`" @click="result = !result">
      <div class="radio-small-circle"></div>
    </div>
    <div class="radio-label" @click="result = !result">{{ item.label }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const selectItemId = defineModel()

const { item } = defineProps(['item'])

const result = computed({
  get() {
    return selectItemId.value === item.id
  },
  set(val) {
    selectItemId.value = item.id
  },
})
</script>

<style lang="less" scoped>
@primary-color: #088395;

.radio {
  display: flex;
  align-items: center;

  .radio-big-circle {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(20, 28, 29, 0.1);
    border-radius: 50%;
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;

    .radio-small-circle {
      width: 0;
      height: 0;
      border: none;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      transition: all 0.3s;
    }
  }

  .radio-label {
    margin-left: 18px;

    color: rgb(20, 28, 29);
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;
  }

  .is_actived {
    background-color: @primary-color;

    .radio-small-circle {
      width: 8px;
      height: 8px;
      background-color: #fff;
      border-radius: 50%;
    }
  }
}
</style>